var arr = [
  "source-in",
  "source-out",
  "source-atop",
  "destination-over",
  "destination-in",
  "destination-out",
  "destination-atop",
  "lighter",
  "darken",
  "xor",
  "copy",
];
var draw = function (globalCompositeOperation) {
  var ctx = canvas.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(0, 0, 200, 200);

  ctx.globalCompositeOperation = globalCompositeOperation; //全局合成操作
  ctx.fillStyle = "red";
  ctx.fillRect(100, 100, 200, 200);
};
draw("source-over");
var frag = document.createDocumentFragment();
var btnbox = document.getElementById("btn-box");
arr.forEach((res) => {
  var button = document.createElement("button");
  var text = document.createTextNode(res);
  button.onclick = function () {
    draw(res);
  };
  button.appendChild(text);
  frag.appendChild(button);
});
btnbox.appendChild(frag);
